<template>
    <div class="main">
        <el-descriptions title="" size="default" :column="1">
            <el-descriptions-item label="比赛名称:">
                {{ match?.name }}
            </el-descriptions-item>
            <el-descriptions-item label="比赛时间:">
                {{ TimeYH1(match?.activitystarttime) }} - {{ TimeYH1(match?.activityendtime) }}
            </el-descriptions-item>
        </el-descriptions>
        <el-form size="default" :inline="true">
            <!-- 比赛下拉框 -->
            <el-form-item label="选择比赛" size="default">
                <el-select v-model="match" value-key="ID" clearable placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in selectMatch" :key="item.ID" :label="item.name" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="start" type="primary" size="default">
                    查询
                </el-button>
            </el-form-item>
        </el-form>
        <el-table :data="matchSummarize" height="67vh" :row-class-name="rowClassName" @row-click="clickTableRow"
            row-key="ID" :expand-row-keys="expand">
            <template v-slot:empty>
                <el-empty image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png" />
            </template>
            <el-table-column type="expand">
                <template #default="{ row }">
                    <div class="padding20 padding-top0">
                        <b>心得体会({{ row.user.name }})</b>
                        <div class="margin20">
                            <el-text type="info" size="default" class="" v-text="row.context"></el-text>
                        </div>
                        <b>题目总结({{ row.user.name }})</b>
                        <el-table border :data="row.matchsummaryuser" style="width: 100%" size="default">
                            <el-table-column type="index" prop="" label="序号" width="60">
                            </el-table-column>
                            <el-table-column prop="questionname" label="题目名" width="300" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="df" label="得分" width="80">
                            </el-table-column>
                            <el-table-column prop="time" label="用时(mins)" width="130">
                                <template #default="{ row }">
                                    <div>
                                        <el-text type="info" size="default" class="" v-text="row.time"></el-text>
                                        <!-- <el-input disabled size="default" placeholder="题目用时" v-model="row.time"
                                            type="number" min="1" /> -->
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="context" label="题目总结">
                                <template #default="{ row }">
                                    <div>
                                        <el-text type="info" size="default" class="" v-text="row.context"></el-text>
                                        <!-- <el-input class="" disabled size="default" placeholder="题目总结" maxlength="500"
                                            show-word-limit v-model="row.context" :autosize="{ minRows: 2 }"
                                            type="textarea" /> -->
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="user.name" label="成员" width="">
            </el-table-column>
            <el-table-column prop="createdAt" label="发表时间" width="" :formatter="({ createdAt }) => TimeYH(createdAt)"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="questionnum" label="总结题目数" width="">
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination class="pager" :page-size="limit" :total="totalCount" @current-change="changePage"
            layout="total,prev, pager, next" :current-page="Math.floor(offset / limit) + 1">
        </el-pagination>

        <el-dialog v-model="dialogVisible" title="比赛总结" width="900">
            <template #header>
                <span class="icon-text el-dialog__header-title">
                    <el-icon class="text-primary">
                        <Guide />
                    </el-icon>
                    比赛总结
                </span>
            </template>
            <div class="margin-bottom20">
                <div class="">
                    <b>题目总结</b>
                </div>
                <el-table row-class-name="" :data="matchSummarizeUser" max-height="50vh">
                    <template v-slot:empty>
                        <el-empty image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png" />
                    </template>

                    <el-table-column type="index" prop="" label="" width="60">
                    </el-table-column>
                    <el-table-column prop="questionname" label="题目名" max-width="150" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="df" label="得分" width="60">
                    </el-table-column>
                    <el-table-column prop="time" label="用时(mins)" width="130">
                        <template #default="{ row }">
                            <div>
                                <el-text type="info" size="default" class="" v-text="row.time"></el-text>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="context" label="题目总结">
                        <template #default="{ row }">
                            <div>
                                <el-text type="info" size="default" class="" v-text="row.context"></el-text>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="">
                <div class="">
                    <b>心得体会</b>
                </div>
                <div class="">
                    <el-text type="info" size="default" class="" v-text="context"></el-text>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { asyncSelectmatchsummary, asyncteamselectactivitys } from '../../../api';
import { Storekey } from "../../../interface";
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { TimeYH, TimeYH1 } from "../../../util/time";

const p = defineProps<{ matchId: number, data: Studycodemodel.Iactivity }>()
const route = useRoute()
const store = useStore(Storekey)
const getuser = computed(() => {
    return store.state.user
})
const teamId = computed(() => {
    return getuser.value?.teamid;
});

const match = ref<Studycodemodel.Iactivity>(p.data)
watch(() => match.value, e => {
    getMatchSummarize()
})
watch(() => p.matchId, e => {
    match.value = { ID: e }
})
const selectMatch = ref<Studycodemodel.Iactivity[]>([])

async function start() {
    // 获取比赛列表
    const { rows, count } = await asyncteamselectactivitys({ teamid: teamId.value })
    selectMatch.value = rows
    getMatchSummarize()
}

const limit = ref(20)
const offset = ref(0)
const totalCount = ref<number>(0)
const matchSummarize = ref<Studycodemodel.Imatchsummary[]>([])
async function getMatchSummarize() {
    if (match.value.ID) {
        let cond = { activityid: match.value.ID, _limit: limit.value, _offset: offset.value, }
        // 过滤参赛选手
        if (match.value.activityuser?.length) {
            const uids = match.value.activityuser.map(e => e.userid)
            cond.userid = uids
        }
        const { rows, count } = await asyncSelectmatchsummary(cond)
        matchSummarize.value = rows
        totalCount.value = count
    }
}
function changePage(r: number) {
    offset.value = (r - 1) * limit.value
    getMatchSummarize()
}

onMounted(async () => {
    await start()
    if (p.matchId) {
        match.value = p.data
    } else {
        match.value = selectMatch.value[0]
    }
})

// 
const dialogVisible = ref(false)
// 比赛总结
const context = ref("")
// 题目总结
const matchSummarizeUser = ref<Studycodemodel.Imatchsummaryuser[]>([])
// 展开行
const selectedRow = ref({});
const expand = ref<(number | undefined)[]>([])
function clickTableRow(row: Studycodemodel.Imatchsummary) {
    if (expand.value.includes(row.ID)) {
        expand.value = expand.value.filter(e => e !== row.ID)
    } else {
        expand.value.push(row.ID)
    }
    matchSummarizeUser.value = row.matchsummaryuser || []
    context.value = row.context || ""
    if (selectedRow.value !== row) {
        selectedRow.value = row
        return
    }
    selectedRow.value = {}
    // dialogVisible.value = true
}

function rowClassName({ row, rowIndex }: { row: Studycodemodel.Imatchsummary, rowIndex: number }): string {
    let className = 'cursor-pointer'
    if (selectedRow.value == row) {
        className = 'highlight-row cursor-pointer'; // 
    }
    return className;
};
</script>

<style>
.main {
    min-height: 100%;
    /* padding-bottom: 20px; */
}
</style>